<template>
  <div class="login-info">
    <el-row>
      <el-col :xs="24" :sm="11" :md="8" :lg="9" :xl="8" style="width:70%;" class="log-text">
        <h3 style="text-align: center;">我的世界</h3>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
          <el-form-item label="账号：" prop="account">
            <el-input v-model="ruleForm.account" autocomplete="off" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" show-password clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  name: 'login',
  data() {
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error("账号不能为空"));
      } else {
        callback();
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        account: '',
        password: '',
      },
      rules: {
        account: [{
          validator: validateAccount,
          trigger: 'blur'
        }],
        password: [{
          validator: validatePassword,
          trigger: 'blur'
        }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(valid,"22222222");
          if (this.ruleForm.account != "admin" || this.ruleForm.password != "123456") {
            //只是为了做登录效果，所以账号密码写的固定的。
            this.$message.error('账号密码不正确');
            return false;
          } else {//真正项目中登录成功之后，就可以用路由跳转页面
            this.$message({
              message: '登陆成功',
              type: 'success'
            });
            this.$router.push('/home')
          }
        } else {
          this.$message.error('登录失败');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
 
<style scoped>
.login-info {
  width: 600px;
  height: 400px;
  position: absolute;
  /*position:fixed;*/
  left: 50%;
  top: 50%;
  margin-left: -300px;
  /*宽度的一半*/
  margin-top: -200px;
  /*高度的一半*/
  background-color: #fff;
  box-shadow: 0px 0px 20px #000;
  border-radius: 5px;
}
.log-text {
  width: 400px;
  height: 200px;
  position: absolute;
  /*position:fixed;*/
  left: 50%;
  top: 50%;
  margin-left: -200px;
  /*宽度的一半*/
  /* margin-top: -100px; */
  margin-top: 9%;
}
</style>